.view {
  position: relative;
  display: flex;
  gap: 20px;
  width: 100%;
  height: 100%;
}

.bg {
  position: absolute;
  top: 10%;
  left: 12%;
  z-index: 0;
  width: 48%;
}

.areaBox {
  position: absolute;
  top: 19%;
  left: 0;
}

.stationView {
  position: absolute;
  bottom: 36%;
  z-index: 5;
  width: 19%;
}

.overflowText {
  max-width: 10rem;
  white-space: nowrap; /* 不换行 */
  text-align: center;
  text-overflow: ellipsis; /* 显示省略号 */
}

.OpacityCard {
  height: 100%;
}

.viewBox {
  padding: 0;
  background-color: #fff;
  opacity: 0.8;
}

.viewLeft {
  display: flex;
  flex: 2;
  flex-direction: column;
  justify-content: space-between;
}

.viewLeftBottom {
  display: flex;
  gap: 20px;
}

.leftChart {
  flex: 1;
  height: 80%;
}

.viewRight {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  height: 100%;
}

.viewRightBox {
  flex: 1;
}

.stationInfo {
  width: 100%;
  height: 12%;
}

.hoverItem {
  z-index: 2;
  padding: 12px 25px;
  background-image: url('@/assets/img/pop3.png');
  background-size: cover;
}

.hoverGCP {
  position: absolute; /* 相对定位 */
  top: 18%;
  left: 25%;
}

.hoverWind {
  position: absolute; /* 相对定位 */
  top: 35%;
  left: 27%;
}

.hoverDiesel {
  position: absolute; /* 相对定位 */
  top: 28%;
  left: 35%;
}

.hoverPile {
  position: absolute; /* 相对定位 */
  top: 38%;
  left: 49%;
}

.hoverBox {
  position: absolute; /* 相对定位 */
  top: 50%;
  left: 45%;
  z-index: 2;
  padding: 8px 38px;
  background-image: url('@/assets/img/pop4.png');
  background-position: center;
  background-size: cover;
}

.hoverBoxItem {
  display: flex;
  gap: 10px;

  span {
    margin-bottom: 5px;
    color: #666;
  }

  span:last-child {
    color: #1a6cfe;
  }
}

.hoverItemTitle {
  color: #333; /* 标题颜色 */
  font-size: 12px; /* 标题字体大小 */
}

.hoverItemText {
  color: #007bff; /* 数值颜色 */
  font-weight: bold; /* 加粗 */
  font-size: 18px; /* 数值字体大小 */
}

@media (max-width: 1620px) {
  .view {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .stationInfo {
    height: 18%;
  }

  .alarmArea {
    position: absolute;
    top: 125%;
    width: 49%;
  }

  .viewRight {
    position: absolute;
    top: 95%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    height: 80%;
  }

  .viewRightBox {
    flex: 1;
    height: 44%;
  }

  .viewLeftBottom {
    position: absolute;
    top: 142%;
    width: 100%;
  }

  .areaBox {
    position: absolute;
    top: 20%;
  }

  .stationView {
    position: absolute;
    top: 55%;
    width: 48%;
    height: 24%;
  }

  .bg {
    position: absolute;
    top: 25%;
    width: 80%;
  }

  .hoverGCP {
    position: absolute; /* 相对定位 */
    top: 31%;
    left: 33%;
  }

  .hoverWind {
    position: absolute; /* 相对定位 */
    top: 51%;
    left: 37%;
  }

  .hoverDiesel {
    position: absolute; /* 相对定位 */
    top: 44%;
    left: 50%;
  }

  .hoverPile {
    position: absolute; /* 相对定位 */
    top: 55%;
    left: 75%;
  }

  .hoverBox {
    position: absolute; /* 相对定位 */
    top: 70%;
    left: 68%;
    z-index: 2;
    width: 230px;
    padding: 8px 38px;
    background-image: url('@/assets/img/pop4.png');
    background-position: center;
    background-size: cover;
  }
}
